<!--
 * @Author: fengshan@0525 3183359488@qq.com
 * @Date: 2023-02-28 14:09:50
 * @LastEditors: fengshan0525 3183359488@qq.com
 * @LastEditTime: 2024-10-15 17:44:32
 * @FilePath: \vbase2\src\components\MyTable\index.vue
 * @Description: table表格封装，使用该表格组件可快速创建90%的业务表格
 * options 选项：
   border（Boolean）、
   stripe:（Boolean）、
   showPagination: 是否显示分页、默认显示
   showSelect是否可选择, 默认不选择
   showOrder:Boolean 是否显示排序， 默认显示
   showOption: Booean 是否显示操作，默认显示
   optionWidth: 操作项宽度，默认250, 可不用加'px'
   maxHeight: 表格最大高度

 * tableColumns 选项：
   slotable(Boolean,父组件：<template v-slot:prop=${row}>, 其中prop就是tableColumns中的prop, 使用了slotable就必须要设置相应的插槽！)、
   showOverflowTooltip(Boolean)、
   headtooltip：Boolean控制是否需要提示文案如果设置为true，则需要传入tooltipContent：'12333'、
   sortable：Boolean，是否可排序，设置为true，则需要@sortChange="handleSortChange"来接受emit事件,注意根据需要调整order，比如可调整为0 | 1 | false | true 等等
   width: 宽度,默认180px
 * tableOutHeader: 表格外头部插槽
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->

<!--
  Copyright@ UKDQ
  Author@ Fengshan
  Time: 2024-9-19
-->
<template>
  <div>
    <slot name="tableOutHeader"></slot>
    <el-table
      :data="tableData"
      :row-key="getRowKey"
      v-loading="tableLoading"
      class="mt-3 w-100"
      @selection-change="$emit('selectionChange', $event)"
      @select-all="$emit('selectionAll', $event)"
      @sort-change="$emit('sortChange', $event)"
      :stripe="options.stripe !== undefined ? options.stripe : true"
      :max-height="options.maxHeight"
      height="710px"
    >
      <el-table-column v-if="options.showSelect" label="#" type="selection" fixed="left"></el-table-column>
      <el-table-column label="序号" prop="index" type="index"  fixed="left" width="55" v-if="options.showOrder !== undefined ? options.showOrder : true"></el-table-column>

      <template v-for="item in tableColumns">
        <el-table-column
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :min-width="item.width ? item.width : '180px'"
          :sortable="item.sortable ? 'custom' : false"
          v-if="item.hide !== undefined ? !item.hide : true"
          :show-overflow-tooltip="item.showOverflowTooltip !== undefined ? item.showOverflowTooltip : false"
        >
          <template #header v-if="item.headtooltip">
            {{ item.label }}
            <el-tooltip effect="dark" :content="item.tooltipContent" placement="top-start">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </template>
          <template v-if="item.slotable" v-slot="{ row }">
            <slot :row="row" :name="item.prop"></slot>
          </template>
          <template v-else-if="item.isTime" v-slot="{ row }">
            {{ dayjs(row[item.prop]).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
      </template>

      <el-table-column label="操作" :width="options.optionWidth ? options.optionWidth : '250'" fixed="right" v-if="options.showOption !== undefined ? options.showOption : true">
        <template v-slot="{ row }">
          <slot :row="row" name="operation"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="options.showPagination !== undefined ? options.showPagination : true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    // 表格数据，需处理后添加index字段传入进来
    tableData: {
      type: Array,
      required: true,
      default: () => [{}]
    },
    // 列字段，[{}], 可使slotable: true 创建作用域插槽，对数据进行格式化
    tableColumns: {
      type: Array,
      required: true,
      default: () => [{}]
    },
    // 表格加载
    tableLoading: {
      type: Boolean,
      default: false
    },
    // 可选择的每页数量
    pageSizes: {
      type: Array,
      default: () => [20, 40, 60, 100]
    },
    // 初始每页数量 父子双向绑定
    pageSize: {
      type: Number,
      default: 20
    },
    // 起始页 父子双向绑定
    pageNum: {
      type: Number,
      default: 1
    },
    // 总条数
    total: {
      type: Number,
      default: 0
    },
    options: {
      type: Object,
      default: () => {}
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    maxHeight: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      msg: '23'
    }
  },
  methods: {
    getRowKey ({ index }) {
      return index
    },
    // 翻页/跳转
    handleCurrentChange (value) {
      this.$emit('update:pageNum', value)
      this.$emit('turnOn')
    },
    handleSizeChange (value) {
      this.$emit('update:pageSize', value)
      this.$emit('turnOn')
    }
  }
}
</script>
<style scoped>
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mt-3 {
  margin-top: 12px;
}

.w-100 {
  width: 100%;
}
</style>
